<template>
  <div class="zz" style="padding-top:60px;">
    <h4>发现</h4>
    <van-tabs v-model="active" swipeable color="#000000" line-height="3px" @touchmove.prevent>
      <van-tab title="精选">
        <All></All>
      </van-tab>
      <van-tab title="灵感">
        <Common></Common>
      </van-tab>
      <van-tab title="品牌">
        <Pinpai></Pinpai>
      </van-tab>
      <van-tab title="实体店">
        <Dianpu></Dianpu>
      </van-tab>
      <van-tab title="媒体报道">
        <Common></Common>
      </van-tab>
      <van-tab title="设计师">
        <Common></Common>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Dianpu from "../components/discover_dianpu";
import Pinpai from "../components/discover_pinpai";
import All from "../components/discover_title";
import Common from "../components/discover_common";
export default {
  data() {
    return {
      active: ""
    };
  },
  components: {
    All,
    Common,
    Dianpu,
    Pinpai
  }
};
</script>

<style scoped>
h4 {
  background: #f9f9f9;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding-top: 40px;
  padding-bottom: 40px;
  z-index: 6;
  text-align: center;
}
.zz >>> .van-tabs--line .van-tabs__wrap {
  height: 84px;
}
.zz >>> .van-ellipsis {
  font-size: 24px;
  margin: auto 0;
}
.zz >>> .van-ellipsis {
  margin-top: 20px;
}
.zz >>> .van-tabs__nav {
  background: #f9f9f9;
  position: fixed;
  top: 100px;
  left: 0;
  z-index: 4;
  height: 80px;
  width: 100%;
  overflow-x: hidden;
}
</style>